<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Karaoke.pe</title>
	
	<%@include file="scripts.jsp" %>
    <%@page import="java.util.Collection"%>
<%@page import="karaoke.modelo.Sala"%>
<%@page import="karaoke.modelo.Local"%>
<%@page import="karaoke.negocio.GestionLocales"%>	


<style type="text/css" title="currentStyle">
		
		@import "css/DT_bootstrap.css";
		</style>
		
		<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			var oTable;
		
			$(document).ready(function() {
				/* Add a click handler to the rows - this could be used as a callback */
				$("#example tbody tr").click( function( e ) {
					if ( $(this).hasClass('row_selected') ) {
						$(this).removeClass('row_selected');
					}
					else {
						oTable.$('tr.row_selected').removeClass('row_selected');
						$(this).addClass('row_selected');
					}
				});
				
				/* Add a click handler for the delete row */
				$('#delete').click( function() {
					var anSelected = fnGetSelected( oTable );
					if ( anSelected.length !== 0 ) {
						oTable.fnDeleteRow( anSelected[0] );
					}
				} );
				
				/* Init the table */
				oTable = $('#example').dataTable( );
			} );
			
			
			/* Get the rows which are currently selected */
			function fnGetSelected( oTableLocal )
			{
				return oTableLocal.$('tr.row_selected');
			}
		</script>
			
			
</head>
<body class="preview" id="top">
	
<%@include file="header.jsp" %>

<div class="container">
<form class="form-horizontal" action="SalasServlet" method="post" name="FormSala" id="FormSala">
<fieldset>

<!-- Form Name -->

<legend>HU02. Mantenimiento de Salas</legend>
<!-- Select Basic -->
<div class="control-group" class="span6">
  <label class="control-label">Local</label>
  <div class="controls">
    <select id="idLocal" name="idLocal" class="input-large">
    <%
	Collection<Local> locales = null;
	GestionLocales negocio = new GestionLocales();
	
	 locales = negocio.listar();
	String idLocalInicial=request.getParameter("idLocal");

	if (locales != null) {
		
	for (Local l :locales)
	{
		 int valLocal=l.getIdlocal();
			if (idLocalInicial==null){
				idLocalInicial=l.getIdlocal()+"";
			}
				
	   if ( (valLocal+"").equals(idLocalInicial))
		{
		  out.println("<option selected value="+l.getIdlocal()+">"+l.getNombre()+"</option>"); }
		  else
		  {
	      out.println("<option value="+l.getIdlocal()+">"+l.getNombre()+"</option>");  
		  }
  	}
	}
	%>  


    </select>
  </div>
</div>

<!-- Text input-->
<div class="control-group" class="span6">
  <label class="control-label">Nombre</label>
  <div class="controls">
    <%
         String NombreLocalInicial=request.getParameter("NombreLocal");
         if(NombreLocalInicial==null){NombreLocalInicial="";}
         out.println("<input id='NombreLocal' name='NombreLocal' type='text' value='"+NombreLocalInicial +"' class='input-large'>");
       
    %>
    
<!-- Button -->
    
     <button id="Buscar" name="Buscar"  formaction="SalasServlet" class="btn btn-mini" type="submit">Buscar</button>

 	<%
 	Collection<Sala> salas = (Collection<Sala>) request.getAttribute("SALAS_ENCONTRADAS");
	%>
    
  </div>
</div>
			
<!-- Button (Double) -->
<div class="control-group" class="span8">
 
  <div class="controls" class="span2">
    <button id="BotonRegistrar" href="#RegistrarModal" name="BotonRegistrar" class="btn btn-mini btn-primary" data-toggle="modal">Registrar</button>
    <button id="BotonModificar" href="#ModificarModal" name="BotonModificar" class="btn btn-mini btn-primary" data-toggle="modal">Modificar</button>
    <button id="BotonEliminar"  href="#EliminarModal"  name="BotonEliminar"  class="btn btn-mini btn-primary" data-toggle="modal">Eliminar</button>
    </div>
</div>

</fieldset>

<div id="demo" class="span8">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
	<thead>
		<tr>
			<th>id.</th>
			<th>C&oacute;digo</th>
			<th>Nombre</th>
			<th>Capacidad</th>
			<th>Descripci&oacute;n</th>
			<th>Eliminado</th>
		</tr>
	</thead>
	<tbody>
 	
	<%
	if (salas != null) {
	for (Sala x :salas)
	{
		out.println("<tr class='gradeX'>");
		out.println("<td>"+x.getIdSala()+"</td>");
		out.println("<td>"+x.getCodigo()+"</td>");

		out.println("<td>"+x.getNombre()+"</td>");
		out.println("<td>"+x.getCapacidad()+"</td>");
		out.println("<td>"+x.getDescripcion()+"</td>");
		if (x.iseLog()){
			out.println("<td align=\"center\"> <input type='checkbox' disabled checked value=true></td>");
		}	else{
			out.println("<td align=\"center\"> <input type='checkbox' disabled value=false></td>");
		}
		out.println("</tr>");
	}		

	}
		%>
	</tbody>

</table>



</div>
<div class="spacer"></div>

</form>

<form id="FormEliminarSala" class="form-horizontal" action="SalaEliminarServlet" name="FormEliminarSala" method="post" onsubmit="operarEli(); return false;">

   <div id="EliminarModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
		    <h3 id="myModalLabel">Eliminar Sala</h3>
		  </div>
		  <div class="modal-body">
		  <fieldset>
			
			<div class="control-group">
			  <label class="control-label">Local</label>
			  <div class="controls">
			    <input id="EliLocal" name="EliLocal" type="text" class="input-medium" readonly="readonly" >
			    <input id="EliidLocal" name="EliidLocal" type="text" class="input-mini" readonly="readonly" >
			
			  </div>
			</div>
			
			
			<div class="control-group">
			  <label class="control-label">Id</label>
			  <div class="controls">
			    <input id="EliId" name="EliId" type="text" class="input-mini" readonly="readonly">
			    
			  </div>
			</div>
			
			<div class="control-group">
			  <label class="control-label">C&oacute;digo</label>
			  <div class="controls">
			    <input id="EliCodigo" name="EliCodigo" type="text" class="input-Small" readonly="readonly">
			    
			  </div>
			</div>
			
			<div class="control-group">
			  <label class="control-label">Nombre</label>
			  <div class="controls">
			    <input id="EliNombre" name="EliNombre" type="text" class="input-xlarge" readonly="readonly">
			    
			  </div>
			</div>
			
			<!-- Text input-->
			<div class="control-group">
			  <label class="control-label">Capacidad</label>
			  <div class="controls">
			    <input id="EliCapacidad" name="EliCapacidad" type="number" class="input-mini" readonly="readonly">
			    
			  </div>
			</div>
			
			<!-- Textarea -->
			<div class="control-group">
			  <label class="control-label">Descripci&oacute;n</label>
			  <div class="controls">                     
			    <textarea id="EliDescripcion" name="EliDescripcion" readonly="readonly"></textarea>
			  </div>
			</div>
			
			
			<div class="control-group">
		
			  <label class="control-label">Estado</label>
			  <div class="controls">
			    <input id="EliEliminado" name="EliEliminado" type="text" class="input-Small" readonly="readonly">
	
			  </div>
			</div>
			
			</fieldset>
		  </div>
		      	<div id="idElioperamsg" class="alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
			 	    <div id="msjEliresultados"></div>
				</div>
		  
		  <div class="modal-footer">
  
		    <button id="EliGrabar" class="btn btn-mini btn-primary" formaction="SalaEliminarServlet" type="submit">Eiminar</button> 
		    <button id="EliCerrar" class="btn btn-mini" data-dismiss="modal" aria-hidden="true">Cerrar</button>
		     
		
		  </div>
	</div>	  
</form>
<form id="FormModificarSala" name="FormModificarSala" class="form-horizontal" action="SalaModificarServlet" method="post" onsubmit="operarMod(); return false;" >

   <div id="ModificarModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
		    <h3 id="myModalLabel">Modificar Sala</h3>
		  </div>
		  	 	
		  <div class="modal-body">
		  <fieldset>
			
			<div class="control-group">
			  <label class="control-label">Local</label>
			  <div class="controls">
			    <input id="ModLocal" name="ModLocal" type="text" class="input-medium" readonly="readonly" >
			    <input id="ModidLocal" name="ModidLocal" type="text" class="input-mini" readonly="readonly" >
			
			  </div>
			</div>
			
			
			<div class="control-group">
			  <label class="control-label">Id</label>
			  <div class="controls">
			    <input id="ModId" name="ModId" type="text" class="input-mini" readonly="readonly">
			    
			  </div>
			</div>
			<div class="control-group">
			  <label class="control-label">C&oacute;digo</label>
			  <div class="controls">
			    <input id="ModCodigo" name="ModCodigo" type="text" class="input-Small" required>
			    
			  </div>
			</div>
					
			
			<div class="control-group">
			  <label class="control-label">Nombre</label>
			  <div class="controls">
			    <input id="ModNombre" name="ModNombre" type="text" class="input-xlarge" required>
			    
			  </div>
			</div>
			
			<!-- Text input-->
			<div class="control-group">
			  <label class="control-label">Capacidad</label>
			  <div class="controls">
			    <input id="ModCapacidad" name="ModCapacidad" type="number" class="input-mini" min="1" required>
			  </div>
			</div>
			
			<!-- Textarea -->
			<div class="control-group">
			  <label class="control-label">Descripci&oacute;n</label>
			  <div class="controls">                     
			    <textarea id="ModDescripcion" name="ModDescripcion"></textarea>
			  </div>
			</div>
			
			
			<div class="control-group">
		
			  <label class="control-label">Estado</label>
			  <div class="controls">
			    <input id="ModEliminado" name="ModEliminado" type="text" class="input-Small" readonly="readonly">
			    
			
			  </div>
			</div>
			
			</fieldset>
		  </div>
		    	<div id="idModoperamsg" class="alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
			 	    <div id="msjModresultados"></div>
				</div>
		 
		  <div class="modal-footer">
		    <button id="ModGrabar" class="btn btn-mini btn-primary">Grabar</button> 
		    <button id="ModCerrar" class="btn btn-mini" data-dismiss="modal" aria-hidden="true">Cerrar</button>
		  </div>
	</div>	  
</form>
<form id="FormRegistrarSala" name="FormRegistrarSala" class="form-horizontal" action="SalaRegistrarServlet" method="post" onsubmit="operarReg(); return false;" >

	
<div id="RegistrarModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
		  <div class="modal-header">
		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
		    <h3 id="myModalLabel">Registrar Sala</h3>
		  </div>
		  <div class="modal-body">
		  
		  <fieldset>
			
			<!-- Form Name -->
			<!-- Text input-->
			<div class="control-group">
			  <label class="control-label">Local</label>
			  <div class="controls">
			    <input id="RegLocal" name="RegLocal" type="text" class="input-medium" readonly="readonly" >
			    <input id="RegidLocal" name="RegidLocal" type="text" class="input-mini" readonly="readonly" >
			  </div>
			</div>
			
			<!-- Text input-->
			
			<!-- Text input-->
			<div class="control-group">
			  <label class="control-label">C&oacute;digo</label>
			  <div class="controls">
			    <input id="RegCodigo" name="RegCodigo" type="text" class="input-Small" required>
			    
			  </div>
			</div>
			
			<div class="control-group">
			  <label class="control-label">Nombre</label>
			  <div class="controls">
			    <input id="RegNombre" name="RegNombre"  type="text" class="input-xlarge" required>	    
			  </div>
			</div>
			
			<!-- Text input-->
			<div class="control-group">
			  <label class="control-label">Capacidad</label>
			  <div class="controls">
			    <input id="RegCapacidad" name="RegCapacidad" type="number" class="input-mini" min="1"  required>
			  </div>
			</div>
			<!-- Textarea -->
			<div class="control-group">
			  <label class="control-label">Descripci&oacute;n</label>
			  <div class="controls">                     
			    <textarea id="RegDescripcion" name="RegDescripcion"></textarea>
			  </div>
			</div>
			</fieldset>
		  </div>
		     	<div id="idRegoperamsg" class="alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
			 	    <div id="msjRegresultados"></div>
				</div>
		 
		  <div class="modal-footer">
		  
		    <button id="RegGrabar" class="btn btn-mini btn-primary">Grabar</button> 
		    <button id="RegCerrar" class="btn btn-mini" data-dismiss="modal" aria-hidden="true">Cerrar</button>
		   
		  </div>

	</div>	  



</form>


 </div> <!-- /container -->
<script type="text/javascript">

var Regoperamsg = $("#idRegoperamsg");
var Regload = $(".progress");
Regoperamsg.hide();
Regload.hide();

function operarReg(){
	var Regform = $("#FormRegistrarSala");
	var Regdivmsg = Regoperamsg.find("div#msjRegresultados");
	var Regbutton = $("#RegGrabar");
	//cargador
	Regoperamsg.removeClass("alert alert-info").fadeIn("fast");
	Regload.show();
	Regbutton.attr("disabled", true);
	
	var request = $.ajax({
	  url: Regform.attr("action"),
	  type: "POST",
	  data: Regform.serialize(),
	  dataType: "json"
	});
	
	
	request.done(function(msg) {
		Regload.hide();
		Regdivmsg.html( msg.mensaje );
		Regoperamsg.addClass(msg.claseMsg).delay(2000).fadeOut("slow", function(){
			Regbutton.attr("disabled", false);
			if (msg.tipoMsg == "success") {
				$("#FormSala").submit();
			}
		});
		console.log(msg);
	});
	
	request.fail(function(jqXHR, textStatus) {
		Regdivmsg.html("Request failed: " + textStatus );
	});
	
	return false;
}

var Elioperamsg = $("#idElioperamsg");
var Eliload = $(".progress");
Elioperamsg.hide();
Eliload.hide();

function operarEli(){
	var Eliform = $("#FormEliminarSala");
	var Elidivmsg = Elioperamsg.find("div#msjEliresultados");
	var Elibutton = $("#EliGrabar");
	//cargador
	Elioperamsg.removeClass("alert alert-info").fadeIn("fast");
	Eliload.show();
	Elibutton.attr("disabled", true);
	
	var request = $.ajax({
	  url: Eliform.attr("action"),
	  type: "POST",
	  data: Eliform.serialize(),
	  dataType: "json"
	});
	
	
	request.done(function(msg) {
		Eliload.hide();
		Elidivmsg.html( msg.mensaje );
		Elioperamsg.addClass(msg.claseMsg).delay(2000).fadeOut("slow", function(){
			Elibutton.attr("disabled", false);
			if (msg.tipoMsg == "success") {
				$("#FormSala").submit();
			}
		});
		console.log(msg);
	});
	
	request.fail(function(jqXHR, textStatus) {
		Elidivmsg.html("Request failed: " + textStatus );
	});
	
	return false;
}

var Modoperamsg = $("#idModoperamsg");
var Modload = $(".progress");
Modoperamsg.hide();
Modload.hide();

function operarMod(){
	var Modform = $("#FormModificarSala");
	var Moddivmsg = Modoperamsg.find("div#msjModresultados");
	var Modbutton = $("#ModGrabar");
	//cargador
	Modoperamsg.removeClass("alert alert-info").fadeIn("fast");
	Modload.show();
	Modbutton.attr("disabled", true);
	
	var request = $.ajax({
	  url: Modform.attr("action"),
	  type: "POST",
	  data: Modform.serialize(),
	  dataType: "json"
	});
	
	
	request.done(function(msg) {
		Modload.hide();
		Moddivmsg.html( msg.mensaje );
		Modoperamsg.addClass(msg.claseMsg).delay(2000).fadeOut("slow", function(){
			Modbutton.attr("disabled", false);
			if (msg.tipoMsg == "success") {
				$("#FormSala").submit();
			}
		});
		console.log(msg);
	});
	
	request.fail(function(jqXHR, textStatus) {
		Moddivmsg.html("Request failed: " + textStatus );
	});
	
	return false;
}


		$("#BotonEliminar").click(function(){
			var parmidsala = $("#example").find("tr.row_selected").children().html();
			var parmidlocal = $("#idLocal option:selected").val();
			var parmCodigo = $("#example").find("tr.row_selected").children().next().html();
			var parmNombre = $("#example").find("tr.row_selected").children().next().next().html();
			var parmCapacidad = $("#example").find("tr.row_selected").children().next().next().next().html();
			var parmDescripcion = $("#example").find("tr.row_selected").children().next().next().next().next().html();
			var parmEliminado = $("#example").find("tr.row_selected").children().next().next().next().next().next().find('input:checked').is(':checked');
			var parmLocal=$("#idLocal option:selected").text();
			$("#EliLocal").val(parmLocal);
			$("#EliidLocal").val(parmidlocal);
			$("#EliId").val(parmidsala);
			$("#EliCodigo").val(parmCodigo);

			$("#EliNombre").val(parmNombre);
			$("#EliCapacidad").val(parmCapacidad);
			$("#EliDescripcion").val(parmDescripcion);
			if (parmEliminado){$("#EliEliminado").val("Eliminado");} else{$("#EliEliminado").val("");}
		}
		);
				
		$("#BotonModificar").click(function(){
			var parmidsala = $("#example").find("tr.row_selected").children().html();
			var parmidlocal = $("#idLocal option:selected").val();
			var parmCodigo = $("#example").find("tr.row_selected").children().next().html();

			var parmNombre = $("#example").find("tr.row_selected").children().next().next().html();
			var parmCapacidad = $("#example").find("tr.row_selected").children().next().next().next().html();
			var parmDescripcion = $("#example").find("tr.row_selected").children().next().next().next().next().html();
			var parmEliminado = $("#example").find("tr.row_selected").children().next().next().next().next().next().find('input:checked').is(':checked');
			var parmLocal=$("#idLocal option:selected").text();
			$("#ModLocal").val(parmLocal);
			$("#ModidLocal").val(parmidlocal);
			$("#ModId").val(parmidsala);
			$("#ModCodigo").val(parmCodigo);

			$("#ModNombre").val(parmNombre);
			$("#ModCapacidad").val(parmCapacidad);
			$("#ModDescripcion").val(parmDescripcion);
			if (parmEliminado){$("#ModEliminado").val("Eliminado");} else{$("#ModEliminado").val("");}
			}	
		);

		$("#BotonRegistrar").click(function(){
			var parmidlocal = $("#idLocal option:selected").val();
			var parmLocal=$("#idLocal option:selected").text();
			$("#RegLocal").val(parmLocal);
			$("#RegidLocal").val(parmidlocal);
			}	
		);

</script>
 <%@include file="footer.jsp" %>
 <%@include file="lejavascript.jsp" %>
	
</body>
</html>